<template>
  <div>
    <!-- 详情信息 -->
    <el-drawer v-model="isShowDrawer" direction="rtl" size="50%">
      <div style="padding:10px">
        <el-table :data="uploadLogList">
          <el-table-column property="fileName" label="文件名称"></el-table-column>
          <el-table-column property="progress" label="进度" width="200">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="16" :percentage="scope.row.progress"></el-progress>
            </template>
          </el-table-column>
          <el-table-column property="state" label="状态" width="150">
            <template #default="scope">
              <el-tag type="success" v-show="scope.row.state === 2">已上传</el-tag>
              <el-tag type="info" v-show="scope.row.state === 0">正在上传</el-tag>
              <el-tag type="warning" v-show="scope.row.state === 1">暂停</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button v-show="scope.row.state === 0" @click="handleStop(scope.row.hash)" type="text" size="small">
                暂停
              </el-button>
              <el-button v-show="scope.row.state === 1" @click="handleUpload(scope.row.hash)" type="text" size="small">
                继续上传
              </el-button>
              <el-button v-show="scope.row.state === 1" @click="handleRemove(scope.row.hash)" type="text" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <!-- 右下角的浮动弹窗 -->
    <div v-show="uploadLogList.length > 0 && !isShowDrawer" class="log-float-box">
      <div v-show="uploadLogList.length >= 2">
        <el-link type="primary" @click="isShowDrawer = true">{{ uploadLogList.length }}个文件正在上传,点击查看详情</el-link>
      </div>
      <div v-if="uploadLogList.length === 1">
        <div><el-link type="primary" @click="isShowDrawer = true">{{ uploadLogList[0].fileName }}</el-link></div>
        <el-progress :text-inside="true" :stroke-width="16" :percentage="uploadLogList[0].progress"></el-progress>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useUploadLogStore } from '@core/store/uploadLog'; // 假设Pinia store文件路径

// 获取Pinia store实例
const uploadLogStore = useUploadLogStore();

// 定义响应式数据
const isShowDrawer = ref(false);
const uploadLogList = ref(uploadLogStore.uploadLogList);

// 监听store中的uploadLogList变化，更新组件内的响应式数据
watch(() => uploadLogStore.uploadLogList, (newList) => {
  uploadLogList.value = newList;
});

// 续传
const handleUpload = (P_Hash) => {
  const findObj = uploadLogList.value.find((pre_item) => pre_item.hash === P_Hash);
  if (findObj) {
    if (findObj.file) {
      // 有文件直接调上传方法
      findObj.state = 0;
      uploadLogStore.starUpload(findObj.hash);
    } else {
      // 需要用户重新选择文件
      const inputDom = document.createElement("input");
      inputDom.type = "file";
      inputDom.onchange = () => {
        const file = inputDom.files[0];
        // 判断文件和旧文件是否一致
        if (file.name === findObj.fileName && file.size === findObj.fileSize) {
          findObj.file = file;
          // 有文件直接调上传方法
          findObj.state = 0;
          uploadLogStore.starUpload(findObj.hash);
        } else {
          // 提示
          console.log("此文件与原文件不一致!");
        }
      };
      inputDom.click();
    }
  }
};

// 暂停
const handleStop = (P_Hash) => {
  uploadLogStore.stopUpload(P_Hash);
};

// 删除
const handleRemove = (P_Hash) => {
  uploadLogStore.removeLog(P_Hash);
};
</script>

<style lang="scss" scoped>
.log-float-box {
  position: fixed;
  bottom: 20px;
  padding: 20px;
  border-radius: 10px;
  right: 10px;
  z-index: 999999;
  background: #fff;
  box-shadow: 0 0 17px 4px rgba(0, 0, 0, 0.2);
}
</style>